<template>
    <div>
        <el-table
            v-loading="loading"
            ref="currencyTable"
            :data="tableData"
            stripe
            style="width: 100%"
            @selection-change="getSelectVal"
        >
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column
                type="index"
                align="center"
                label="序号"
            ></el-table-column>
            <el-table-column
                prop="dept.deptName"
                label="部门名称"
            ></el-table-column>
            <el-table-column
                prop="userName"
                label="用户名称"
                width="120"
            ></el-table-column>
            <el-table-column prop="staffStatus" label="员工状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.staffStatus === 1">实习</span>
                    <span v-if="scope.row.staffStatus === 2">试用期</span>
                    <span v-if="scope.row.staffStatus === 3">已转正</span>
                    <span v-if="scope.row.staffStatus === 4">试用不合格</span>
                    <span v-if="scope.row.staffStatus === 5">已辞退</span>
                    <span v-if="scope.row.staffStatus === 6">自愿离职</span>
                    <span v-if="scope.row.staffStatus === 7">黑名单</span>
                    <span v-else>--</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="dept.leader"
                label="负责人"
            ></el-table-column>
            <el-table-column prop="sex" label="性别">
                <template slot-scope="scope">
                    <span v-if="scope.row.sex === 1">男</span>
                    <span v-if="scope.row.sex === 2">女</span>
                    <span v-else>--</span>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="帐号状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status === '0'" type="success"
                        >正常</el-tag
                    >
                    <el-tag v-if="scope.row.status === '1'" type="danger"
                        >停用</el-tag
                    >
                </template>
            </el-table-column>
            <el-table-column
                prop="phonenumber"
                label="联系电话"
                width="120"
            ></el-table-column>
            <el-table-column
                prop="idCard"
                label="身份证号码"
                width="160"
            ></el-table-column>
            <el-table-column
                prop="address"
                label="联系地址"
                width="240"
            ></el-table-column>
            <el-table-column
                prop="email"
                label="邮箱"
                width="180"
            ></el-table-column>
        </el-table>
        <el-pagination
            class="pagination mt10"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
        >
        </el-pagination>
    </div>
</template>

<script>
import { listUser } from "@/api/system/user";
export default {
    data() {
        return {
            tableData: [],
            page: 1, //当前页
            limit: 10, //每页条数
            total: 0,
            loading: false,
        };
    },
    methods: {
        //分页器size
        handleSizeChange(val) {
            this.limit = val;
            this.getDataList();
        },
        //分页器当前页
        handleCurrentChange(val) {
            this.page = val;
            this.getDataList();
        },
        getSelectVal(val) {
            if (val.length) {
                this.$emit("update:visible", false);
                this.$emit("getSelectVal", val);
            }
        },
        getDataList() {
            this.loading = true;
            let parmas = {
                page: this.page,
                limit: this.limit,
            };
            listUser(parmas).then((res) => {
                this.tableData = res.rows;
                this.total = res.total;
                this.loading = false;
            });
        },
    },
    mounted() {
        this.getDataList();
    },
};
</script>

<style></style>
